<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.username" clearable class="filter-item" style="width: 200px;" :placeholder="$t('请输入用户账号')"/>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{$t('Search')}}</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" :element-loading-text="$t('Searching')" border fit highlight-current-row>
      <el-table-column type="index" :index="getIndex" width="50"></el-table-column>
      
      <el-table-column align="center" width="100px" :label="$t('Member_ID')" prop="userId" sortable/>

      <el-table-column align="center" :label="$t('Member_account')" prop="username">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('会员等级')" prop="userLevel">
        <template slot-scope="scope">
          <el-tag >{{ filterLevelMember(scope.row.userLevel) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('账户余额')" prop="availableAmount">
        <template slot-scope="scope">
          {{ scope.row.availableAmount | floorTwoDecimal }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('账户积分')" prop="points">
        <template slot-scope="scope">
          {{ scope.row.points.toFixed(0)  }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('类型')" prop="type">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1" style="color:green;">{{$t('账户充值')}}:${{scope.row.amount}}</span>
          <span v-if="scope.row.type == 2" style="color:red;">{{$t('账户消费')}}:${{scope.row.amount | floorTwoDecimal }}</span>
          <span v-if="scope.row.type == 8" style="color:green;">{{$t('账户退款')}}:${{scope.row.amount}}</span>
          <span v-if="scope.row.type == 9" style="color:green;">{{$t('订阅购买')}}:${{scope.row.amount}}</span>
          <span v-if="scope.row.type == 10" style="color:green;">{{$t('订阅续订')}}:${{scope.row.amount}}</span>
          <span v-if="scope.row.type == 11" style="color:green;">{{$t('订阅赠送')}}:${{scope.row.amount}}</span>
          <span v-if="scope.row.type == 12" style="color:green;">{{$t('礼物卡充值')}}:${{scope.row.amount}}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>

<script>
  import { levelMemberList, payMemberList } from '../../api/user'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import { userBill } from '@/api/user'
  export default {
    name: "userBill",
    components: { Pagination },
    data(){
      return {
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          username: undefined,
          sort: 'add_time',
          order: 'desc'
        },
        levelDic: [this.$t('普通会员'), this.$t('白银会员'), this.$t('黄金会员'), this.$t('铂金会员'), this.$t('钻石会员')]
      }
    },
    async created(){
      await this.getList()
      await this.getLevelMember()
    },
    methods: {
      getList(){
       return   userBill(this.listQuery).then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },
      handleFilter(){
        this.getList();
      },
      getIndex(index) {
        return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
      },
      getLevelMember(){
        var dataLevel = {
          page: 1,
          limit: 10000,
          status: 2,
        }
        return  levelMemberList(dataLevel).then(response => {
          this.levelDic = response.data.data.list
          this.listLoading = false
        }).catch(() => {
          this.levelDic = []
          this.listLoading = false
        })
      },
      filterLevelMember(id){
        for (let i=0;i<=this.levelDic.length-1;i++) {

           if(this.levelDic[i].id == id){
             return this.levelDic[i].name
           }
        }
      }
    }
  }
</script>

<style scoped>

</style>
